<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bigbox{
            height: 430px;
            width: 296px;
            margin: 100px auto;
            background-color: #ecefff;
            box-shadow: 0px 0px 5px -1px;
           
        }
        .mid{
            width: 276px;
            height: 300px;
            background-color: white;
            border-radius: 7px;
            margin: 0 auto;
            overflow: hidden;
        }
        .mid p{
            text-align: center;
            font-size: 16px;
        }
        .mid input{
            height: 30px;
            width: 230px;
            padding-left: 15px;
            border-radius: 7px;
            margin-left: 12px;
            margin-top: 20px;
            font-size: 12px;
        }
        .zhuce input{
            height: 40px;
            width: 250px;
            border-radius: 7px;
            color: aliceblue;
            background-color: rgba(154, 71, 232, 0.763);
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <img src="./2.png" alt="">
        <div class="mid">
            <p>注册新账号</p>
            <input type="text" placeholder="请输入账号">
            <input type="password" placeholder="请输入密码">
            <input type="password" placeholder="确认密码">
            <div class="zhuce">
                <input type="button" value="注册">
            </div>
        </div>
    </div>
</body>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
</html>
<script src="./ajax封装函数.js"></script>
<script>
    var inputs = document.querySelectorAll('input');
        //给button绑定点击事件
        inputs[3].onclick = function(){
            //对表单内容做校验( 为空校验, 格式校验 )
            if( inputs[0].value && inputs[1].value ){
                if( /^1[3-9]\d{9}$/.test( inputs[0].value ) && /^\d{4}$/.test(inputs[1].value)&& inputs[2].value==inputs[1].value){
                    ajax('get','https://yantianfeng.com/api/register',{ 
                        username:inputs[0].value,
                        password: inputs[1].value,
                    }, function(data){
                        if(data.code==200){
                            alert('注册成功')
                        }else{
                            alert('注册失败')
                        }
                    })
                }else{
                    alert('请输入正确的手机号/密码')
                }
            }else{
                alert('用户名/密码不能为空!')
            }
        }

</script>